<!--
 * @Description: 点餐步进器
 * @Author: Li Cheng
 * @Date: 2021-05-09
 * @LastEditTime: 2021-05-15
-->
<template>
    <div class="van-card__num">
        <div class="van-stepper van-stepper--round">
            <button
                type="button"
                :class="['van-stepper__minus', { 'van-stepper__minus--disabled': minDisabled }]"
                :disabled="minDisabled"
                @click="foodReduce"
            />
            <input :value="food.orderNumber" type="number" class="van-stepper__input" readonly />
            <button
                type="button"
                :class="['van-stepper__plus', { 'van-stepper__plus--disabled': maxDisabled }]"
                :disabled="maxDisabled"
                @click="foodAdd"
            />
        </div>
    </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        food: {
            type: Object,
            required: true,
            default: () => ({
                orderNumber: 0,
            }),
        },
    },
    setup(props) {
        const store = useStore();
        const minDisabled = computed(
            () => props.food.orderNumber <= store.state.order.orderNumberMin
        );
        const maxDisabled = computed(
            () => props.food.orderNumber >= store.state.order.orderNumberMax
        );

        const foodReduce = () => {
            store.dispatch('order/reduceFood', props.food);
        };
        const foodAdd = () => {
            store.dispatch('order/addFood', props.food);
        };

        return {
            minDisabled,
            maxDisabled,
            foodReduce,
            foodAdd,
        };
    },
};
</script>
